/**
 * Created by duke on 2020/9/18.
 */
/**
 * Created by duke on 2020/9/18.
 */
/**
 * Created by duke on 2020/9/16.
 */
import React from 'react';
import { PureComponent } from "react";
import { Layout, Row, Col, Menu, Select, Button, Carousel } from 'antd';
import { Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import appCri from './appCri.png';
const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;
const { Option } = Select;
const backCri = {
    backgroundSize: '66px 59px',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: '242px 0px',
    backgroundImage: 'url(' + appCri + ')',
   float:'left',
   marginLeft:'40px',
   width:'300px',
   height:'70px'

}
export default class PosApp extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            path: localStorage.getItem("path"),
            current: '3',
            IsFooter1: false,
            IsFooter2: false,
            IsFooter3: false,
            IsFooter4: false,
            IsmouseOver: false,
            IsmouseOverAnroid: false,
        }
    };
    componentWillMount() {

    };
    componentDidMount() {

    };
    footer1Over = () => {
        this.setState({
            IsFooter1: true
        })
    }
    footer1Out = () => {
        this.setState({
            IsFooter1: false
        })
    }
    footer2Over = () => {
        this.setState({
            IsFooter2: true
        })
    }
    footer2Out = () => {
        this.setState({
            IsFooter2: false
        })
    }
    footer3Over = () => {
        this.setState({
            IsFooter3: true
        })
    }
    footer3Out = () => {
        this.setState({
            IsFooter3: false
        })
    }
    footer4Over = () => {
        this.setState({
            IsFooter4: true
        })
    }
    footer4Out = () => {
        this.setState({
            IsFooter4: false
        })
    }
    mouseOver = () => {
        this.setState({
            IsmouseOver: true
        })
    }
    mouseOverAnroid = () => {
        this.setState({
            IsmouseOverAnroid: true
        })
    }
    mouseOut = () => {
        this.setState({
            IsmouseOver: false
        })
    }
    mouseOutAnroid = () => {
        this.setState({
            IsmouseOverAnroid: false
        })
    }
    uposClick = () => {

        window.location.href = "/upos/";


    }
    questionClick = () => {
        window.location.href = "/question/";
    }
    chatClick = () => {
        window.location.href = "/chat/";
    }
    backTop = () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        })
    }
    render() {
        let { path, IsmouseOver, IsmouseOverAnroid, current, IsFooter1, IsFooter2, IsFooter3, IsFooter4, } = this.state;
        return (
            <Layout style={{ background: '#fff', minWidth: '1500px', overflow: 'auto' }}>
                <Header style={{ width: '100%', }}>
                    <Row>
                        <Col span={4}></Col>
                        <Col span={16}>
                            <Row style={{ width: '100%' }}>
                                <Col span={4}>
                                    <img src={path + "images/header.png"} style={{ width: '143px', height: '26px' }} />
                                </Col>
                                <Col span={9}>
                                    <img src={path + "images/slogan.png"} style={{ width: '190px', height: '48px' }}></img>
                                </Col>
                                <Col span={11} style={{ position: 'relative' }}>
                                    <img src={path + "images/arrowDown.png"} style={{ width: '24px', position: 'absolute', top: '19px', left: '140px' }}></img>
                                    <Menu mode="horizontal" selectedKeys={[current]}>
                                        <Menu.Item key="0">
                                            <Link to="/" style={{ color: '#2B292D' }}>首页</Link>
                                        </Menu.Item>
                                        <SubMenu key="sub1" title="产品中心">
                                            <Menu.Item key="1">

                                                <Link to="/upos/"> 进销存管理系统</Link>
                                            </Menu.Item>
                                            <Menu.Item key="2">
                                                <Link to="/pos/">收银系统</Link>
                                            </Menu.Item>
                                            <Menu.Item key="3">
                                                <Link to="/posApp/">在线商城APP</Link>
                                            </Menu.Item>

                                        </SubMenu>
                                        {/* <Menu.Item key="2">
                                        <Link to="/pos/">POS收银系统</Link>
                                    </Menu.Item>
                                    <Menu.Item key="3">
                                       <Link to="/posApp/">UPOS APP</Link>
                                    </Menu.Item> */}
                                        <Menu.Item key="4">
                                            <Link to="/question/">解决方案</Link>
                                        </Menu.Item>
                                        <Menu.Item key="5">
                                            <Link to="/chat/">关于我们</Link>
                                        </Menu.Item>

                                    </Menu>
                                </Col>

                            </Row>
                        </Col>
                        <Col span={4}></Col>
                    </Row>
                </Header>
                <Content>
                    <img src={path + "images/appBanner.png"} style={{ width: '100%' }}></img>
                    <div>
                        <div style={{width:'1200px',margin:'46px auto'}}>
                            <div style={{overflow:'hidden',}}>
                                <div style={{float:'left',marginTop:'26px'}}>
                                    <img src={path + "images/appGood.png"} style={{width:'64px'}}></img>
                                </div>
                                <div style={{ float: 'left', marginLeft: "40px", width: '1096px', position: 'relative',  borderBottom: '1px solid #9D9BA1', }}>
                                    <p style={{ fontSize: '36px', fontWeight: '500', color: '#151515', height: '36px', marginTop: "33px", lineHeight: '36px', marginBottom: '16px', }}>商品展示功能介绍</p>
                                    <img src={path + "images/appCri.png"} style={{width:'66px',position:'absolute',top:"0px",left:'242px'}}></img>
                                </div>
                            </div>
                            <div style={{marginTop:'61px',overflow:'hidden'}}>
                                <div style={{float:'left'}}>
                                    <img src={path + "images/appList.png"} style={{width:'584px'}}></img>
                                </div>
                                <div style={{float:'left',marginLeft:'133px',width:'483px'}}>
                                    <p style={{ marginTop: '224px', color:"#151515",fontSize:'16px',fontWeight:'400'}}>不登录也能浏览商品，当顾客需要加入购物车 或下单时，系统再强制顾客登录；支持中意语言任意切换，华人和老外都能看得懂；提供热门商品展示位，为门店带来更多的销量；分类界面有效引导顾客，找到想要购买的商品；</p>
                                    <div style={{ margin: '96px 35px 0 0', background: '#87D1DA', color: '#E4FEFF', borderRadius: '2px', width: '224px', height: '54px', lineHeight: '54px', textAlign: 'center' }}>陆续上架视频中…</div>
                                </div>
                            </div>
                        </div>
                      
                    </div>
                    <div className="uposBanner">
                        <div style={{ width: '1200px', margin: '0px auto',padding:'46px 0' }} >
                            <div style={{ overflow: 'hidden', }}>
                                <div style={{ float: 'left', marginTop: '26px' }}>
                                    <img src={path + "images/appCard.png"} style={{ width: '64px' }}></img>
                                </div>
                                <div style={{ float: 'left', marginLeft: "40px", width: '1096px', position: 'relative', borderBottom: '1px solid #9D9BA1', }}>
                                    <p style={{ fontSize: '36px', fontWeight: '500', color: '#151515', height: '36px', marginTop: "33px", lineHeight: '36px', marginBottom: '16px', }}>商品展示功能介绍</p>
                                    <img src={path + "images/appCri.png"} style={{ width: '66px', position: 'absolute', top: "0px", left: '242px' }}></img>
                                </div>
                            </div>
                            <div style={{ marginTop: '61px', overflow: 'hidden' }}>
                                <div style={{ float: 'left' }}>
                                    <img src={path + "images/appCard1.png"} style={{ width: '584px' }}></img>
                                </div>
                                <div style={{ float: 'left', marginLeft: '133px', width: '483px' }}>
                                    <p style={{ marginTop: '224px', color: "#151515", fontSize: '16px', fontWeight: '400' }}>购物车可以“保管”顾客已添加的商品，待需要时可进入购物车界面直接下单。系统实时检查购物车内商品的状态，例如：商品下架、库存不足等商品，会进行提示并做相应措施，防止商品超卖；顾客下单后，UPOS会及时发送邮件至门店管理员，提醒备货；</p>
                                    <div style={{ margin: '96px 35px 0 0', background: '#87D1DA', color: '#E4FEFF', borderRadius: '2px', width: '224px', height: '54px', display: 'inline-block', lineHeight: '54px', textAlign: 'center' }}>陆续上架视频中…</div>
                                    {/* <div style={{ margin: '96px 0 0 0', background: '#ffffff', color: '#00CBD8', borderRadius: '2px', width: '224px', height: '54px', border: '2px solid #00CBD9', display: 'inline-block', lineHeight: '54px', textAlign: 'center' }}>查看“下单操作”视频</div> */}
                                </div>
                            </div>
                        </div>
                    </div>
                   


                </Content>

                <Footer style={{ background: '#001123', padding: '81px 0 0 0px', }}>
                    <div style={{ overflow: 'hidden', width: '1200px', margin: '0 auto' }}>
                        <div style={{ float: 'left' }}>
                            <img src={path + "images/logoUpos.png"} style={{ width: '143px', height: '26px' }} />
                        </div>
                        <div style={{ float: 'left', borderRight: '1px solid rgb(42,42,42)', padding: '0 90px 0px 196px', width: '588px' }}>
                            <a style={{ color: '#fff', fontSize: '16px', marginRight: '168px', }} className='aHover' >
                                <Link to="/upos/" style={{ color: '#fff', }} onClick={this.backTop}> 产品中心</Link>


                            </a>
                            <a style={{ color: '#fff', fontSize: '16px', }} className='aHover' >
                                <Link to="/question/" style={{ color: '#fff', }} onClick={this.backTop}>  解决方案</Link>


                            </a>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '22px' }}>进销存管理系统</p>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '12px' }}>收银系统</p>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '12px' }}>在线商品APP</p>
                            <p style={{ marginTop: '92px', }}>
                                <a style={{ color: '#fff', fontSize: '16px', }} href="/chat/" className='aHover' >
                                    <Link to="/chat/" style={{ color: '#fff', }} onClick={this.backTop}>    关于我们</Link>


                                </a>
                            </p>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '22px' }}>杭州青湘科技有限公司</p>
                            <div style={{ margin: '15px 0 0px 0', color: '#999999', fontSize: '14px', }}>
                                <span style={{ height: '16px', paddingRight: '20px', borderRight: '1px solid #999999', }}>杭州</span>
                                <span style={{ height: '16px', padding: '0px 16px 0px 16px', borderRight: '1px solid #999999', }}>上海</span>
                                <span style={{ height: '16px', padding: '0px 16px 0px 16px', borderRight: '1px solid #999999', }}>北京</span>
                                <span style={{ height: '16px', padding: '0px 16px 0px 16px', borderRight: '1px solid #999999', }}>深圳</span>
                                <span style={{ height: '16px', paddingLeft: '20px', }}>威尼斯</span>
                            </div>
                        </div>
                        <div style={{ float: 'left', paddingLeft: '86px', color: '#999999', }}>
                            <p style={{ fontSize: '16px' }}>中国联系方式：</p>
                            <div>
                                <img src={path + "images/weChat.png"} style={{ width: '24px', height: '24px' }}></img>
                                <span style={{ fontSize: '14px', marginLeft: '8px' }}>企业微信</span>

                            </div>
                            <div style={{ marginTop: '8px' }}>
                                <img src={path + "images/erweima.png"} style={{ width: '104px' }}></img>

                            </div>
                            <p style={{ fontSize: '16px', marginTop: '48px' }}>意大利销售专员：</p>
                            <div>
                                <img src={path + "images/phone.png"} style={{ width: '24px', height: '24px' }}></img>
                                <span style={{ fontSize: '14px', marginLeft: '8px' }}>韩先生手机</span>
                            </div>
                            <p style={{ fontSize: '14px', marginTop: '12px', color: '#fff' }}>+39/3778832691</p>
                        </div>
                        <div style={{ float: 'left', marginLeft: '117px', color: '#999', fontSize: '14px', paddingTop: '42px' }}>
                            <div>
                                <img src={path + "images/email.png"} style={{ width: '24px', height: '24px', }}></img>
                                <span style={{ fontSize: '14px', marginLeft: '8px' }}>Email</span>
                                <p style={{ color: '#fff', fontSize: '14px', marginTop: '8px' }}>support@imichi.cn</p>
                                <div style={{ marginTop: '172px' }}>
                                    <img src={path + "images/email.png"} style={{ width: '24px', height: '24px' }}></img>
                                    <span style={{ fontSize: '14px', marginLeft: '8px' }}>Email</span>
                                </div>
                                <p style={{ fontSize: '14px', marginTop: '12px', color: '#fff' }}>upositalia@gmail.com</p>
                            </div>
                        </div>
                    </div>
                    <div style={{ borderTop: '1px solid rgb(42,42,42)', marginTop: "79px", fontSize: '14px', color: '#999', textAlign: 'center', padding: '20px 0 22px' }}>版权所有 @杭州青湘科技有限公司</div>

                </Footer>

            </Layout>
        );
    }

}


